<template>
  <div class="container">
    <Row class="header" type="flex" align="middle" justify="center">
      <Col span="24">
        <span class="title">数据统计分析</span>
      </Col>
    </Row>
    <Row class="body" type="flex" justify="center">
      <Col class="body-inner" span="22">
        <br>
        <Row type="flex" justify="center">
          <Col span="22">
            <data-bar></data-bar>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <city-time-echart :width="offsetWidth * 0.9" :height="250"></city-time-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <city-district-echart :width="offsetWidth * 0.9" :height="250"></city-district-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <province-in-ratio-echart :show-type="'phone'" :width="offsetWidth * 0.9" :height="250"></province-in-ratio-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <province-out-ratio-echart :show-type="'phone'" :width="offsetWidth * 0.9" :height="250"></province-out-ratio-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <flow-district-echart :width="offsetWidth * 0.9" :height="250"></flow-district-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <type-district-echart :width="offsetWidth * 0.9" :height="250"></type-district-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <condition-time-echart2 :width="offsetWidth * 0.9" :height="250"></condition-time-echart2>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <fever-district-echart :width="offsetWidth * 0.9" :height="250"></fever-district-echart>
          </Col>
        </Row>
        <divider-line></divider-line>
        <Row type="flex" justify="center">
          <Col span="22">
            <city-district-table :show-type="'phone'"></city-district-table>
          </Col>
        </Row>
        <br>
      </Col>
    </Row>
  </div>
</template>

<script>
import AreaEchart from './compoments/area-echart'
import DailyEchart from './compoments/daily-echart'
import FeverDistrictEchart from './compoments/fever-district-echart'
import FeverTimeEchart from './compoments/fever-time-echart'
import CityTimeEchart from './compoments/city-time-echart'
import CityDistrictEchart from './compoments/city-district-echart'
import DividerLine from './compoments/divider-line'
import DataBar from './compoments/data-bar'
import ContactTimeEchart from './compoments/contact-time-echart'
import ContactDistrictEchart from './compoments/contact-district-echart'
import DistrictSituationTable from './compoments/district-situation-table'
import ProvinceInRatioEchart from './compoments/province-in-ratio-echart/index'
import ProvinceOutRatioEchart from './compoments/province-out-ratio-echart/index'
import FlowDistrictEchart from './compoments/flow-district-echart/index'
import TypeDistrictEchart from './compoments/type-district-echart/index'
import ConditionTimeEchart2 from './compoments/condition-time-echart2/index'
import CityDistrictTable from './compoments/city-district-table/index'

export default {
  components: {
    CityDistrictTable,
    ConditionTimeEchart2,
    TypeDistrictEchart,
    FlowDistrictEchart,
    ProvinceOutRatioEchart,
    ProvinceInRatioEchart,
    DistrictSituationTable,
    ContactDistrictEchart,
    ContactTimeEchart,
    DataBar,
    DividerLine,
    CityDistrictEchart,
    CityTimeEchart,
    FeverTimeEchart,
    FeverDistrictEchart,
    DailyEchart,
    AreaEchart
  },
  data () {
    return {
      offsetWidth: document.documentElement.clientWidth,
      offsetHeight: document.documentElement.clientHeight
    }
  },
  mounted () {
  },
  methods: {}
}
</script>

<style lang="less" scoped>
  .container {
    height: 100%;
    overflow: auto;
    background-color: #FCD9BE;
  }

  .header {
    height: 4em;
    text-align: center;
  }

  .title {
    color: rgba(199, 12, 22, 0.8);
    font-size: 1.4rem;
    display: inline-block;
  }

  .body {
    margin: 0 0 1em 0;
  }

  .body-inner {
    border-radius: 1em;
    background-color: rgba(250, 250, 250, 1);
  }

  .card {
    /*background-color: rgba(200,200,200,0.1);*/
  }
</style>
